<script lang="ts">
const defaultProps = {
  children: 'children',
  label: 'name',
  value: 'id',
  disabled: 'disabled',
};
</script>

<script setup lang="ts">
import { ref, onMounted } from 'vue';

import request from '@/utils/request';

import TreeTranfer from '@/components/tree-transfer.vue';

const loading = ref(true);

const ids = ref<string[]>([]);

const tree = ref();

/**
 * 获取数据
 */
const getList = async () => {
  tree.value = await request('/mock/tree', 'GET');
};

/**
 * 初始化
 */
const init = () => {
  getList();
};

onMounted(() => {
  loading.value = true;

  init();

  loading.value = false;
});
</script>

<template>
  <div class="page" v-if="loading === false">
    <div class="page__block">
      <TreeTranfer
        v-model="ids"
        show-checkbox
        default-expand-all
        node-key="id"
        :height="450"
        :data="tree"
        :props="defaultProps"
      ></TreeTranfer>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.page {
  width: 100%;
  height: 100%;

  display: flex;
  justify-content: center;

  &__block {
    margin-top: 120px;
    width: 1000px;
    height: 200px;
  }
}
</style>
